import { InlineFilter } from '@/components/InlineFilter';
import { 
  TokensColorsFont, 
  TokensColorsBackground, 
  TokensColorsBorder, 
  TokensColorsShadow, 
  TokensColorsOverlay,
  TokensColorsBrandPrimary,
  TokensColorsBrandSecondary,
  TokensColorsNeutral,
  TokensColorsRed,
  TokensColorsOrange,
  TokensColorsYellow,
  TokensColorsGreen,
  TokensColorsTeal,
  TokensColorsBlue,
  TokensColorsPurple,
  TokensColorsPink,
  TokensColorsBlack,
  TokensColorsWhite,
  TokensColorsTransparent } from '@/components/Theming/TokenGroups';
import { Example, ExampleCode } from '@/components/Example';
import { Tabs, View } from '@aws-amplify/ui-react';
import { ColorsExample } from './examples';

## Semantic

<InlineFilter filters={['angular']}>
  <Example>
    <ExampleCode>
  ```css file=./examples/ColorsExample.css

  ```
    </ExampleCode>
  </Example>
</InlineFilter>
<InlineFilter filters={['react']}>
  <Tabs.Container defaultValue="Example usage">
    <Tabs.List>
      <Tabs.Item value="Example usage">Example usage</Tabs.Item>
      <Tabs.Item value="CSS">CSS</Tabs.Item>
    </Tabs.List>
    <Tabs.Panel value="Example usage">
      <View marginTop="var(--amplify-space-large)">
        <Example>
          <ColorsExample  />
          <ExampleCode>
  ```tsx file=./examples/ColorsExample.tsx

  ```
          </ExampleCode>
        </Example>
      </View>
    </Tabs.Panel>
    <Tabs.Panel value="CSS">
      <View marginTop="var(--amplify-space-large)">
      <Example>
        <ExampleCode>
  ```css file=./examples/ColorsExample.css

  ```
        </ExampleCode>
      </Example>
      </View>
    </Tabs.Panel>
  </Tabs.Container>
</InlineFilter>
<InlineFilter filters={['vue']}>
  <Example>
    <ExampleCode>
  ```css file=./examples/ColorsExample.css

  ```
    </ExampleCode>
  </Example>
</InlineFilter>

### Font
<TokensColorsFont />

### Background
<TokensColorsBackground />

### Border
<TokensColorsBorder />

### Shadow
<TokensColorsShadow />

### Overlay
<TokensColorsOverlay />

## Brand

### Primary
<TokensColorsBrandPrimary />

### Secondary
<TokensColorsBrandSecondary />

## Palette

### Neutral
<TokensColorsNeutral />

### Red
<TokensColorsRed />

### Orange
<TokensColorsOrange />

### Yellow
<TokensColorsYellow />

### Green
<TokensColorsGreen />

### Teal
<TokensColorsTeal />

### Blue
<TokensColorsBlue />

### Purple
<TokensColorsPurple />

### Pink
<TokensColorsPink />

### Black
<TokensColorsBlack />

### White
<TokensColorsWhite />

### Transparent
<TokensColorsTransparent />
